<template>
  <div class="alone-outBox f14">
    <div class="alone-topBox mb16">
      <div class="flex flex-warp flex_bt">
        <div class="flex flex-warp" style="align-items:center">
          <div class="mb16 mr16">
            <span>所属行业：</span>
            <el-select v-model="searchObj.industryType" placeholder="请选择" class="width110" clearable>
              <el-option v-for="item in industryTypeList" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>单位类型：</span>
            <el-select v-model="searchObj.companyType" placeholder="请选择" class="width110" clearable>
              <el-option v-for="item in companyTypeList" :key="item.name" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div class="mb16 mr16">
            <span>职位类型：</span>
            <el-select v-model="searchObj.postType" placeholder="请选择" class="width110" clearable>
              <el-option v-for="item in postTypeList" :key="item.name" :label="item.name" :value="item.id" />
            </el-select>
          </div>
          <div class="mb20">
            <el-button @click="React">重置</el-button>
            <el-button type="primary" @click="SearchListBt">查询</el-button>
          </div>
        </div>
        <div>

        </div>
      </div>
    </div>

    <div class="staffinfo">
      <div class="staff-nav">
        用户名单获取
      </div>
    </div>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="DataTable" style="width: 100%" max-height="620"
      :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column prop="title" label="姓名" min-width="330" align="left">
        <template slot-scope="scope">
          <div class="flex">
            {{ scope.row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sampleName" label="手机号" min-width="110" align="left">
        <template slot-scope="scope">
          {{ scope.row.mobile }}
        </template>
      </el-table-column>

      <el-table-column prop="lyState" label="邮箱" min-width="80" align="left">
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>

      <el-table-column prop="3" label="所属行业" min-width="100" align="center" :sortable="'custom'">
        <template slot-scope="scope">
          <div>{{ scope.row.industry }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="3" label="单位名称" min-width="100" align="center" :sortable="'custom'">
        <template slot-scope="scope">
          <div>{{ scope.row.company }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="3" label="单位类型" min-width="100" align="center" :sortable="'custom'">
        <template slot-scope="scope">
          <div>{{ scope.row.unit }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="3" label="职位" min-width="100" align="center" :sortable="'custom'">
        <template slot-scope="scope">
          <div>{{ scope.row.duty }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="alignRight">
      <Pagination :total="total" :page="searchObj.current" :limit="searchObj.size" @pagination="paginations" />
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import Cookies from 'js-cookie'
import indexapi from '@/api/index'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      searchObj: {
        imshowId: Cookies.get('imShowId')
          ? Cookies.get('imShowId')
          : '',
        industryType: '',//行业类型
        postType: '',//职位类型
        companyType: '',//单位类型
        limit: 10,
        page: 1,
        mid: 22625
      },
      total: 0,
      loading: false,
      reasonDia: false,
      returnReason: '',
      companyTypeList: [],//单位类型列表
      postTypeList: [],//职位类型列表
      industryTypeList: [],//行业类型列表
    }
  },
  mounted() {
    // this.getclassification();
    this.SearchList()
    this.getTypeList()
  },
  methods: {
    handleClick(tab, event) {
      this.searchObj.videoStatus = tab.name
      this.SearchListBt()
    },
    //获取单位类型
    selectUnitType() {
      let form = {
        parentid: 0,
        typename: "DWLX",
      };
      api.video.selectUnitType(form).then((res) => {
        this.companyTypeList = res.data;
      });
    },
    //获取各种类型的列表
    getTypeList() {
      indexapi.support.getIndustryClassifySelectByLevel().then((res) => { //获取行业分类
        if (res.code == 200) {
          this.industryTypeList = res.data.data;
        }
      });
      const searchParam = { "parentid": 0, "typename": "DWLX" };
      const searchParam1 = { "parentid": 1, "typename": "ZWLX" };
      indexapi.support.selectUnitType(searchParam1).then((res) => { //获取职位类型分类
        if (res.code == 200) {
          this.postTypeList = res.data;
        }
      });
    },
    // 重置
    React() {
      this.searchObj = {
        imshowId: Cookies.get('imShowId')
          ? Cookies.get('imShowId')
          : '',
        industryType: '',//行业类型
        postType: '',//职位类型
        companyType: '',//单位类型
        limit: 10,
        page: 1,
        mid: 22625
      }
      this.SearchList()
    },
    // 查询
    SearchListBt() {
      this.searchObj.limit = 10
      this.searchObj.page = 1
      this.SearchList()
    },
    SearchList() {
      this.loading = true
      indexapi.support.getSponsorMeetingPerson(this.searchObj).then((res) => {
        this.loading = false
        this.DataTable = res.data.records
        this.DataTable.forEach((item) => {
          switch (item.ispub) {
            case 0:
              item.ispub_operStr = '上架'
              item.ispub_type = 1
              break
            case 3:
              item.ispub_operStr = '上架'
              item.ispub_type = 1
              break
            case 1:
              item.ispub_operStr = '下架'
              item.ispub_type = 3
              break
            default:
              item.ispub_operStr = '--'
              break

          }
        })
        this.total = res.data.total
      })
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit
      this.searchObj.page = val.page
      this.SearchList()
    }
  }
}
</script>
<style lang="scss" scoped>
.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}

.flex_bt {
  justify-content: space-between;
}

.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}

.staffinfo {
  width: 100%;
  padding: 16px 16px 0 16px;
  box-sizing: border-box;
  position: relative;
  overflow: auto;
  background-color: #FFFFFF;

  .staff-nav {
    width: 100%;
    @include flex(row, center, space-between);

    .nav-option {
      @include flex(row, center, flex-start);

      i {
        font-size: 14px;
        color: #4F5862;
        margin-right: 10px;
      }

      .option-name {
        color: #202933;
        font-size: 14px;
        margin-right: 20px;
      }

      .option-progress {
        @include flex(row, center, center);
        margin-right: 20px;

        .progress-num {
          font-size: 14px;
          color: #202933;
        }
      }

      ::v-deep .el-progress {
        width: 300px;
        margin-right: 20px;

        .el-progress-bar {
          border-radius: 0;

          .el-progress-bar__outer {
            border-radius: 0;

            .el-progress-bar__inner {
              border-radius: 0;
            }
          }
        }
      }
    }
  }
}
</style>
